<template>
  <div class="box_top">
    <MidAEcharts :value="8" :option="configA" :height="chartHeight" :colors="['#bde785', '#bde785']"></MidAEcharts>
    <MidAEcharts :value="13" :option="configB" :height="chartHeight" :colors="['#24bbff', '#24bbff']"></MidAEcharts>
    <MidAEcharts :value="15" :option="configC" :height="chartHeight" :colors="['#5dd49e', '#5dd49e']"></MidAEcharts>
    <MidAEcharts :value="38" :option="configD" :height="chartHeight" :colors="['#4decd5', '#4decd5']"></MidAEcharts>
    <MidAEcharts :value="21" :option="configE" :height="chartHeight" :colors="['#fff225', '#fff225']"></MidAEcharts>
    <MidAEcharts :value="5" :option="configF" :height="chartHeight" :colors="['#63e2fe', '#63e2fe']"></MidAEcharts>
  </div>
</template>

<script>
import MidAEcharts from '@/views/cust/midTop/midAEcharts'
import dayjs from 'dayjs'
export default {
  name: 'BoxTop',
  components: {
    MidAEcharts
  },
  data() {
    return {
      chartHeight: '220px',
      configA: {
        title: '新订单',
        label: {
          fontSize: 25
        }
      },
      configB: {
        title: '在产',
        label: {
          fontSize: 30
        }
      },
      configC: {
        title: '成品',
        label: {
          fontSize: 30
        }
      },
      configD: {
        title: '齐套',
        label: {
          fontSize: 30
        }
      },
      configE: {
        title: '缺料',
        label: {
          fontSize: 30
        }
      },
      configF: {
        title: '需交货',
        label: {
          fontSize: 30
        }
      },
      info: {
        aValue: 154.5,
        bValue: 436.4,
        cValue: 0
      }
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.intervalIns && clearInterval(this.intervalIns)
      this.getRealTimeData()
      this.intervalIns = setInterval(this.getRealTimeData.bind(this), 1000 * 60 * 5) // 每5min刷新
    },
    getRealTimeData() {
      const hour = dayjs().hour()
      if (8 <= hour && hour < 10) {
        this.$set(this.info, 'cValue', 53.7)
      }
      if (10 <= hour && hour < 13) {
        this.$set(this.info, 'cValue', 95.2)
      }
      if (13 <= hour && hour < 15) {
        this.$set(this.info, 'cValue', 195.2)
      }
      if (15 <= hour && hour < 17) {
        this.$set(this.info, 'cValue', 318.6)
      }
    }
  },
  destroyed() {
    clearInterval(this.intervalIns)
  }
}
</script>
<style scoped>
.box_top {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.box_top .v_item {
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  padding-left: 2px;
}
.val {
  font-size: 30px;
  font-weight: 700;
  height: 100px;
  padding-top: 10px;
}
.text {
  font-size: 16px;
  font-weight: 600;
}
.unit {
  font-size: 22px;
  padding-left: 2px;
}
</style>
